<template>
  <section>
    <Card>
      <p slot="title">红娘订单管理</p>
      <Table stripe border :data="list" :columns="columns" />
      <Page
        :current="page"
        :style="pageStyle"
        @on-change="changePage"
        :page-size="10"
        :total="total"
      ></Page>
    </Card>
  </section>
</template>
<script>
import dayjs from 'dayjs';

export default {
  name: 'matchmaker_order_manage',
  data() {
    return {
      total: 0,
      page: 1,
      list: [],
      columns: [
        {
          title: "头像",
          width: 100,
          align: "center",
          render: (h, params) => {
            return h('img', {
              domProps: {
                src: params.row.headimgurl
              },
              style: {
                marginTop: "5px",
                borderRadius:"50%",
                height: '40px',
                lineHeight:"40px"
              }
            });
          },
        },
        {
          title: "姓名",
          width: 200,
          align: "center",
          render: (h, params) => {
            return h("div", params.row.nickname ? params.row.nickname : "");
          },
        },
        {
          title: "匹配对象昵称",
          align: "center",
          width: 200,
          render: (h, params) => {
            return h("Button", {
              props: {
                type: "text",
                size: "small"
              },
              on: {
                click: () => {
                  this.$router.push({
                    name: 'user_detail',
                    query: {
                      id: params.row.customer_id,
                      name: params.row.name,
                      status: "view"
                    }
                  })
                },
              },
            }, params.row.name);
          }
        },
        {
          title: "订单类型",
          width: 200,
          align: "center",
          render: (h, params) => {
            let typeMap = {
              "red_recommend":"红娘牵线服务",
              "red_one": "红娘精准服务/单次",
              "red_three": "红娘精准服务/三次",
              "one": "隐私信息/单次",
              "five":"隐私信息/五次",
              "ten":"隐私信息/十次"
            }
            return h("div", typeMap[params.row.type] || "");
          },
        },
        {
          title: "订单状态",
          align: "center",
           width: 100,
          render: (h, params) => {
            return h("div", params.row.status);
          }
        },{
          title: "下单时间",
          align: "center",
          width: 200,
          render: (h, params) => {
            let date = dayjs(params.row.create_date).format('YYYY-MM-DD HH:mm:ss');
            return h("div", date);
          }
        },
        {
          title: "操作",
          key: "view",
          width: 200,
          fixed: "right",
          align: "center",
          render: (h, params) => {
            let bar = [];
            bar.push(
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small",
                    disabled: params.row.status == "支付成功" ? false : true
                  },
                  style: {
                    marginRight: "10px",
                    backgroundColor: params.row.status == "支付成功" ? "red" : "#ccc",
                    color: "#fff",
                    border: "none"
                  },
                  on: {
                    click: () => {
                      if(params.row.status == "退款成功") {
                        this.$Message.error("该订单已退过款");
                        return;
                      }
                      this.$Modal.confirm({
                        title: '确定退款?',
                        onOk: () => {
                          this.jsonrpc.blind.admin.refund(params.row.pay_id).then((res)=> {
                            this.$Message.success("微信退款中");
                            this.changePage(this.page);
                          })
                        }
                      })
                    },
                  },
                },
                params.row.status == "支付成功" || params.row.status == "服务完成" ? "退款" : "已退款"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "success",
                    size: "small",
                    disabled: params.row.status == "服务完成" || params.row.status == "退款成功" ? true : false
                  },
                  style: {
                    marginRight: "10px",
                    backgroundColor: params.row.status != "服务完成" && params.row.status != "退款成功" ? "#19be6b" : "#ccc",
                    color: "#fff",
                    border: "none"
                  },
                  on: {
                    click: () => {
                      if(params.row.service_status == "服务已完成") {
                        this.$Message.error("该订单已服务完成");
                        return;
                      }
                      this.$Modal.confirm({
                        title: '确定服务完成?',
                        onOk: () => {
                          this.jsonrpc.blind.admin.serviceComplete(params.row.id).then((res)=> {
                            this.$Message.success("服务完成！");
                            this.changePage(this.page);
                          })
                        }
                      })
                    },
                  },
                },
                params.row.status == "服务完成" ? "服务已完成" : "服务完成" 
              )
            )
            return h("div", bar);
          },
        }
      ],
      pageStyle: {
        marginTop: "15px",
      },
    }
  },
  methods: {
    changePage(page) {
      this.jsonrpc.blind.admin
        .getRedPayRecords({ start: (page - 1) * 10, limit: 10 })
        .then((res) => {
          this.list = res.list;
          this.total = res.total;
          this.page = page;
        });
    }
  },
   mounted() {
    this.changePage(1);
    // this.list = [{
    //   id: "c08e98c0-a572-469e-b8dd-3e150b3694ee",
    //   name: "W.",
    //   nickname: "lcj",
    //   create_date: 1606656526846,
    //   status: "支付成功",
    //   service_status: "服务完成",
    //   total_fee: 19900
    // }]
    // this.total = 1
  },
}

</script>
<style scoped>
.center {
  text-align: center;
  margin-bottom: 20px;
}
</style>